<template>
  <el-menu
      router
      class="el-menu-vertical-demo"
      :default-active="$route.path"
      :collapse="menuState"
      background-color="#545c64"
      text-color="#f0f0f0"
      active-text-color="#ffd04b">
    <template v-for="(item, index) in navMenu">
      <el-menu-item v-if="!item.childes" :index="item.path" :key="index">
        <i :class="item.icon"></i>
        <span slot="title">{{item.title}}</span>
      </el-menu-item>

      <el-submenu v-if="item.childes" :index="item.path" :key="index">
        <template slot="title">
          <i :class="item.icon"></i>
          <span slot="title">{{item.title}}</span>
        </template>
        <template v-for="(cItem, cIndex) in item.childes">
          <el-menu-item :index="cItem.path" :key="cIndex">
            <i :class="cItem.icon"></i>
            <span slot="title">{{cItem.title}}</span>
          </el-menu-item>
        </template>
      </el-submenu>
    </template>
  </el-menu>
</template>

<script>
export default {
  name: "AsideMenu",
  data() {
    return {
      navMenu: [
        {
          icon: 'el-icon-s-home',
          title: '首页',
          path: '/'
        },
        {
          icon: 'el-icon-user-solid',
          title: '我的',
          path: '/my',
          childes: [
            {
              icon: 'el-icon-postcard',
              title: '我的信息',
              path: '/my/info'
            },
            {
              icon: 'el-icon-location-outline',
              title: '我的地址',
              path: '/my/addr'
            },
            {
              icon: 'el-icon-shopping-bag-2',
              title: '我的包裹',
              path: '/my/pkg'
            },
          ]
        },
        {
          icon: 'el-icon-s-goods',
          title: '包裹',
          path: '/pkg',
          childes: [
            {
              icon: 'el-icon-document-add',
              title: '包裹新建',
              path: '/pkg/new'
            },
            {
              icon: 'el-icon-search',
              title: '包裹查询',
              path: '/pkg/search'
            },
            {
              icon: 'el-icon-magic-stick',
              title: '包裹处理',
              path: '/pkg/process'
            },
          ]
        },
        {
          icon: 'el-icon-s-check',
          title: '权限',
          path: '/auth'
        },
        {
          icon: 'el-icon-info',
          title: '关于',
          path: '/about'
        },

      ]
    }
  }
  ,
  methods: {}
  ,
  computed: {
    menuState() {
      return this.$store.state.asideMenuState
    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 20vw;
  /*color: #f0f0f0;*/
}
</style>